window.addEventListener('DOMContentLoaded', function () {
  initCrumbs();
  leftTabEvent();
  buttonTabEVent();
  zoom();
  thumbnail();
});
//面包屑数据
function initCrumbs() {
  crumbsData = goodData.path;
  var htmlStr = '';
  crumbsData.forEach(function (item, index) {
    // console.log(item);
    // console.log(index);
    if (index !== crumbsData.length - 1) {
      htmlStr += `<a href='${item.url}'>${item.title}</a>`;
    } else {
      htmlStr += `<a>${item.title}</a>`;
    }
  });
  var crumbEle = document.querySelector('.con .conPoin');
  crumbEle.innerHTML = htmlStr;
}

//左边选项卡
var tabs = document.querySelectorAll('.wrap .productDetail .aside .tabWrap h4');
var contents = document.querySelectorAll(
  '.wrap .productDetail .aside .tabContent > div'
);
function leftTabEvent() {
  Array.from(tabs).forEach(function (item, index) {
    item.onclick = function () {
      for (i = 0; i < tabs.length; i++) {
        tabs[i].classList.remove('active');
      }
      item.classList.add('active');
      for (j = 0; j < tabs.length; j++) {
        contents[j].classList.remove('active');
      }
      contents[index].classList.add('active');
    };
  });
}
//底部选项卡

function buttonTabEVent() {
  var tabs = document.querySelectorAll(
    '.wrap .productDetail .detail .intro .tabWrap li'
  );
  var list = document.querySelectorAll(
    '.wrap .productDetail .detail .intro .tabContent > div'
  );
  Array.from(tabs).forEach(function (item, index) {
    //点击
    item.onclick = function () {
      for (i = 0; i < tabs.length; i++) {
        tabs[i].classList.remove('active');
      }
      item.classList.add('active');
      for (j = 0; j < list.length; j++) {
        list[j].classList.remove('active');
      }
      list[index].classList.add('active');
    };
  });
}
//放大镜
function zoom() {
  //获取节点
  var smallImgBox = document.querySelector(
    '.wrap .con .mainCon .previewWrap .preview .zoom'
  );
  //大图容器
  var preview = document.querySelector(
    '.wrap .con .mainCon .previewWrap .preview'
  );
  //创建一个大图
  var smallImg = new Image();
  smallImg.src = goodData.imgsrc[0].s;
  smallImgBox.appendChild(smallImg);

  //小盒子悬浮
  var mask = null;
  var bigImgBox = null;
  var bigImg = null;
  smallImgBox.onmouseenter = function () {
    //悬浮上去，创造遮盖，大盒子，大图
    mask = document.createElement('div');
    mask.className = 'mask';
    //创造大盒子
    bigImgBox = document.createElement('div');
    bigImgBox.className = 'bigBox';
    //创造大图
    bigImg = new Image();
    bigImg.src = goodData.imgsrc[0].b;
    //DOM
    smallImgBox.appendChild(mask);
    bigImgBox.appendChild(bigImg);
    preview.appendChild(bigImgBox);
    //鼠标移动
    smallImgBox.onmousemove = function (event) {
      //移进去遮盖跟着鼠标走
      var maskLeft =
        event.clientX -
        mask.offsetWidth / 2 -
        smallImgBox.getBoundingClientRect().left;
      var maskTop =
        event.clientY -
        mask.offsetHeight / 2 -
        smallImgBox.getBoundingClientRect().top;

      // 获取遮盖最大的移动距离left：小图片容器宽度 - 遮盖宽度
      var maskMaxMoveLeft = smallImgBox.clientWidth - mask.offsetWidth;
      var maskMaxMoveTop = smallImgBox.clientHeight - mask.offsetHeight;
      // console.log(maskMaxMoveLeft);
      // console.log(maskLeft);
      if (maskLeft > maskMaxMoveLeft) {
        maskLeft = maskMaxMoveLeft;
      } else if (maskLeft < 0) {
        maskLeft = 0;
      }
      if (maskTop > maskMaxMoveTop) {
        maskTop = maskMaxMoveTop;
      } else if (maskTop < 0) {
        maskTop = 0;
      }
      mask.style.left = maskLeft + 'px';
      mask.style.top = maskTop + 'px';
      // 控制大图的移动
      // 比例关系： 遮盖的移动距离(maskLeft) / 遮盖最大的移动距离(maskMaxMoveLeft) = 大图的移动距离(未知) / 大图最大的移动距离（未知）
      // 大图最大的移动距离left = 大图宽度 - 大盒的宽度
      var bigImgMaxLeft = bigImg.clientWidth - bigImgBox.offsetWidth;
      //大图最大的移动距离Top = 大图高度 - 大盒的高度
      var bigImgMaxTop = bigImg.clientHeight - bigImgBox.offsetHeight;
      // 大图的移动距离 = (遮盖的移动距离 * 大图最大的移动距离) / 遮盖最大的移动距离
      var bigImgLeft = (maskLeft * bigImgMaxLeft) / maskMaxMoveLeft;
      var bigImgTop = (maskTop * bigImgMaxTop) / maskMaxMoveTop;

      // 设置大图的left和top
      bigImg.style.left = -bigImgLeft + 'px';
      bigImg.style.top = -bigImgTop + 'px';
    };
    //鼠标离开
    smallImgBox.onmouseleave = function () {
      smallImgBox.removeChild(mask);
      preview.removeChild(bigImgBox);
    };
  };
}
//缩略图
function thumbnail() {
  //获取ul节点
  var list = document.querySelector(
    '.wrap .con .mainCon .previewWrap .specScroll .itemCon .list'
  );
  //循环数据
  goodData.imgsrc.forEach(function (item, index) {
    var lis = document.createElement('li');
    var img = new Image();
  });
}
